<template>
  <div>
    <el-form class="form">
      <el-form-item label="头像">
        <ImageUpload
          v-model="formData.avatar"
          @setImage="setImage"
        />
      </el-form-item>
      <el-form-item label="用户名">
        <el-input v-model="formData.username" />
      </el-form-item>
      <el-form-item label="电话号码">
        <el-input v-model="formData.phone" />
      </el-form-item>
      <el-form-item label="真实姓名">
        <el-input v-model="formData.realName" />
      </el-form-item>
      <el-button
        type="primary"
        @click="confirm"
      >保 存</el-button>
    </el-form>
  </div>
</template>

<script>
import ImageUpload from '@/components/Upload/ImageUpload.vue'
import { getUserById, getUserByToken, updateUser } from '@/api/mall/user'
export default {
  components: { ImageUpload },
  data() {
    return {
      formData: {
        userId: '',
        username: '',
        phone: '',
        realName: '',
        avatar: ''
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      this.$getUserId().then(userId => {
        getUserById(userId).then(res => {
          this.formData = res.data
        })
      })
    },
    setImage(imageUrl) {
      this.formData.avatar = imageUrl
    },
    confirm() {
      updateUser(this.formData).then(response => {
        if (response.statusCode == 20000) {
          this.visible = false
          this.$message({
            message: '操作成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: '发生错误，操作失败',
            type: 'warning'
          })
        }
      })
    }
  }
}
</script>

<style>
.form {
  width: 50%;
  margin: 0 auto;
}
</style>
